<template>
  <div class="banner-card">
    <el-card shadow="hover">
      <div class="item">
        <div class="cover">
          <el-carousel
            :interval="3000"
            type="card"
            height="150px"
            indicator-position="none"
            @change="handleBannerChange"
          >
            <el-carousel-item v-for="item in dataList" :key="item.id">
              <el-image
                style="width: 102px; height: 150px; border-radius:8px;"
                :src="item.image"
                fit="fill"
                lazy
              >
                <div slot="error">
                  <img src="http://foglake.sanye666.top/images/default-covor.jpg" alt style="width: 102px; height: 150px; border-radius:8px;" />
                </div>
              </el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="info">
          <div class="title">{{currentDataList.name}}</div>
          <div class="intro">分榜热门</div>
          <div class="tag">
            <span>{{currentDataList.is_over}}</span>
            <span>{{currentDataList.type}}</span>
          </div>
          <div class="detail">{{currentDataList.intro}}</div>
        </div>
        <el-button round @click="handleToChapter(currentDataList.id)">翻开看看</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "bannercard",
  props: {
    dataList: Array
  },
  data() {
    return {
      currentDataList: {}
    };
  },
  methods: {
    handleBannerChange(e) {
      this.currentDataList = this.dataList[e];
    },
    handleToChapter(id) {
      this.$router.push({
        path: "/chapter",
        query: { id }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.banner-card {
  width: 286px;
  .item {
    padding: 64px 40px 42px 40px;
    .cover {
      margin-bottom: 45px;
    }
    .info {
      text-align: left;
      width: 210px;
      .title {
        font-size: 24px;
        font-family: MicrosoftYaHeiSemibold;
        font-weight: 600;
        color: rgba(6, 27, 65, 0.65);
        line-height: 24px;
        margin-bottom: 10px;
      }
      .intro {
        font-size: 12px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(6, 27, 65, 0.45);
        line-height: 22px;
        margin-bottom: 12px;
      }
      .tag {
        cursor: pointer;
        padding: 22px 0;
        border-top: 1px solid rgba(6, 27, 65, 0.05);
        border-bottom: 1px solid rgba(6, 27, 65, 0.05);
        span {
          font-size: 12px;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          color: rgba(189, 141, 255, 1);
          line-height: 24px;
          padding: 8px 14px;
          border: 1px solid rgba(189, 141, 255, 1);
          border-radius: 20px;
          margin-right: 8px;
        }
      }
      .detail {
        height: 102px;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(6, 27, 65, 0.45);
        line-height: 20px;
        margin-top: 20px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        margin-bottom: 64px;
      }
    }
  }
}

.banner-card:hover {
  transform: translateY(-3px);
  transition: all 0.3s linear;
}
</style>